<template>
    <div class="o2o-store-screen" @click="hideDropdownIfOutside">
        <c-title text="门店成本"></c-title>

        <div class="change-box">
            <div class="change-item" @click.stop="handle_change">
                <span>{{ project_name }}</span>
                <i :class="show_tips ? 'iconfont icon-course_up' : 'iconfont icon-course_down'"></i>

                <div class="search-options" v-if="show_tips" :class="leave_class ? 'leave' : ''">
                    <main class="overflow-y-scroll">
                        <div v-for="item in tips_list" @click.stop="choose(item)" @touchstart="startTouch($event)"
                        @touchend="endTouch($event)"  style="position: relative;z-index: 10;">{{ item.name }}</div>
                    </main>
                   
                </div>
            </div>
            <div class="change-item" @click="show = true;">
                <span>{{ current_date }}</span>
                <i class="iconfont icon-course_down"></i>

            </div>
        </div>

        <div class="table-box" v-if="list && list.length !== 0">
            <div class="table-item" v-for="item in list" :key="item.id" @click="goto(item)"
                :class="current_id === item.id ? 'element' : ''">
                <div class="table-item-head">
                    <div class="left">{{ item.project_name }}：{{ item.price }}元</div>
                    <div class="right flex-a-c">
                        <template v-if="item.type == 1">
                            <i class="iconfont icon-icon_more11"></i>
                        </template>
                        <template v-else>
                            <template v-if="item.has_operate">
                                <i v-if="item.can_edit" @click="handle_edit(item)" class="iconfont icon-fontclass-xiugai"></i>
                                <i @click="handle_delete(item)" class="iconfont icon-fontclass-shanchu"></i>
                            </template>
                        </template>
                    </div>
                </div>
                <div class="table-item-bottom">
                    时间：{{ item.created_at }}
                </div>
            </div>
        </div>

        <div class="footer" :class="{ 'w375': fun.isPc() }">
            <button class="order" @click="handle_add"><i class="iconfont icon-icon_add"></i>添加成本</button>
        </div>

        <van-popup v-model="show" position="bottom" round>
            <van-datetime-picker @cancel="cancel" @confirm="onConfirm" v-model="currentDate" type="date" title="请选择年月日"
                :min-date="minDate" :max-date="maxDate" />
        </van-popup>
    </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
export default {
    mixins: [scrollMixin],
    data() {
        return {
            isLoadMore: true,
            project_name: '选择项目',
            project_id: "",
            timestamp: "",
            show_tips: false,
            current_date: "选择日期",
            currentDate: new Date(),
            minDate: "",
            maxDate: "",
            list: [],
            show: false,
            tips_list: [],
            page: 1,
            store_id: "",
            current_id: "",
            page: 1, total_page: 1,
            leave_class: false,
        };
    },
    mounted() {
        this.get_project_data();
    },
    activated() {
        this.init();
        this.getData();
    },

    methods: {
        init() {
            this.isLoadMore = true;
            let year = new Date().getFullYear();
            this.minDate = new Date(year - 90, 1, 1);
            this.maxDate = new Date(year + 90, 1, 1);
            this.show = false;

        },
        handle_change() {
            if (!this.show_tips) {
                this.show_tips = true;
                this.leave_class = false;
            } else {
                this.leave_class = true;
                setTimeout(() => {
                    this.show_tips = false;
                }, 500);
            }
        },
        goto(data) {
            if (data.type == 1) {
                this.$router.push(this.fun.getUrl("orderdetail", { order_id: data.order_id, orderType: "shop" }));
            }
        },
        async get_project_data() {
            let { result, msg, data } = await $http.post("plugin.store-screen.frontend.controllers.cost.index.get-project-list");
            if (result) {
                this.tips_list = data;

            } else {
                this.$toast(msg)
            }
        },
        async getData(page = 1) {
            let json = { page, search: {}, store_id: this.$route.params.store_id };
            if (this.project_id) {
                json.search['project_id'] = this.project_id;
            }
            if (this.timestamp) {
                json.search['date'] = this.timestamp;
            }
            let { result, msg, data } = await $http.post("plugin.store-screen.frontend.controllers.cost.index", json, '.');
            this.isLoadMore = true;
            if (result) {
                let list = page == 1 ? data.data : this.list.concat(data.data);
                this.page = data.current_page;
                this.total_page = data.last_page;
                this.list = list;
            } else {
                this.$toast(msg)
            }
        },
        getMoreData() {
            this.isLoadMore = false;
            if (this.page >= this.total_page) return;
            let page = this.page + 1;
            this.getData(page);
        },
        hideDropdownIfOutside(event) {
            const dropdown = document.querySelector('.search-options');
            if (dropdown && !dropdown.contains(event.target)) {
                this.show_tips = false;
            }
        },
        handle_edit(data) {
            this.$router.push(this.fun.getUrl('store_screen_form', { id: data.id, store_id: this.$route.params.store_id }))
        },
        handle_delete(data) {
            this.$dialog.confirm({
                title: '提示',
                message: '删除后无法恢复，确认删除吗？',
            })
                .then(() => {
                    $http.post("plugin.store-screen.frontend.controllers.cost.index.delete", { store_id: this.$route.params.store_id, id: data.id }, '.').then(res => {
                        this.$toast(res.msg);
                        if (res.result) {
                            let index = this.list.findIndex(item => item.id == data.id);
                            if (index !== -1) {
                                this.current_id = data.id;
                                setTimeout(() => {
                                    this.list.splice(index, 1);
                                }, 1000);

                            }
                        }
                    })
                })
                .catch(() => { });
        },
        startTouch(event) {
            event.target.style.backgroundColor =  '#F5F5F5';
        },
        endTouch(event) {
            event.target.style.backgroundColor = 'white'
        
        },
        choose(data) {
            this.project_id = data.id == this.project_id ? '' : data.id;
            this.project_name = data.name == this.project_name ? '请选择项目' : data.name;
            if (!this.show_tips) {
                this.show_tips = true;
                this.leave_class = false;
            } else {
                this.leave_class = true;
                setTimeout(() => {
                    this.show_tips = false;
                }, 500);
            }
            this.getData();
        },
        onConfirm(date) {
            this.show = false;
            let _date = new Date(date);
            let year = _date.getFullYear(),
                month = _date.getMonth() + 1 < 10 ? `0${_date.getMonth() + 1}` : `${_date.getMonth() + 1}`,
                day = _date.getDate() < 10 ? `0${_date.getDate()}` : `${_date.getDate()}`;
            this.current_date = `${year}-${month}-${day}`;
            this.currentDate = date;
            this.timestamp = Math.floor(new Date(date).getTime() / 1000);
            this.getData();

        },
        cancel() {
            this.show = false;
        },
        handle_add() {
            this.$router.push(this.fun.getUrl('store_screen_form', { store_id: this.$route.params.store_id }))
        },
    }
};
</script>

<style scoped lang='scss'>
@keyframes fadeIn {
    from {
        opacity: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        transform: translateY(80%);

    }

    to {
        opacity: 1;
        left: .75rem;
        bottom: -0.85rem;
        z-index: 10;
        transform: translateY(100%);
        box-shadow: 1px 1px 6px 3px #ccc;
    }
}

@keyframes fadeOutTips {
    from {
        opacity: 1;
        left: .75rem;
        bottom: -0.85rem;
        z-index: 10;
        transform: translateY(100%);
        box-shadow: 1px 1px 6px 3px #ccc;

    }

    to {
        opacity: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        transform: translateY(80%);
    }
}

/* 定义淡出动画 */
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateX(100px);
        visibility: hidden;
    }
}

.element {
    animation: fadeOut 1s forwards;
}

.leave {
    animation: fadeOutTips 0.5s forwards !important;
}
.overflow-y-scroll{
    max-height: 8.125rem;
    overflow-y: scroll;
}
.search-options {
    position: absolute;
    animation: fadeIn 0.5s forwards;
    background-color: #fff;
    border-radius: .5rem;
    padding: .75rem 0;
    text-align: left;
    box-sizing: border-box;
    width: 70%;

    &::before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: -7px;
        left: 20px;
        background: #fff;
        border: 8px solid transparent;
        border-top-color: #fff;
        border-right-color: #fff;
        transform: rotate(135deg);
        z-index: 5;
        box-shadow: 1px 0px 2px 2px #ccc;
    }

    &::after {
        content: "";
        width: 80px;
        height: 40px;
        position: absolute;
        top: 0;
        left: 10px;
        z-index: 5;
        background: #fff;
    }

    div {
        line-height: 2rem;
        margin: 0 0.75rem;
        word-wrap: normal;
        white-space: nowrap;
        overflow: scroll;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    div:last-child {
        border-bottom: unset;
    }

}

::v-deep .el-input__inner {
    border: 0;
    color: #00001C;
    padding: 0;
}

::v-deep .el-select .el-input .el-select__caret {
    color: #999;
}

::v-deep .el-input__inner::-webkit-input-placeholder {
    color: #00001C;
}

::v-deep .el-select {
    display: block;
    width: 100%;
}

.o2o-store-screen {
    min-height: 100vh;
    .icon-icon_add {
        margin-right: .375rem;
        color: #fff;
        font-size: .625rem;
        line-height: 1;
        font-weight: bold;
    }

    .table-box {
        padding: 0 .75rem 9.0625rem;
    }

    .icon-fontclass-shanchu {
        margin-left: 1.25rem;
        color: #999999;
        font-size: 1rem;
    }

    .icon-fontclass-xiugai {
        color: #999999;
        font-size: .8rem;

    }

    .table-item {

        background: #FFFFFF;
        border-radius: .5rem;
        padding: .875rem .75rem .9375rem;
        margin-bottom: .625rem;


    }

    .table-item-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .left {
        font-weight: 500;
        font-size: .9375rem;
        color: #00001C;
        line-height: 1;
    }

    .table-item-bottom {
        font-weight: 400;
        font-size: .8125rem;
        line-height: 1;
        text-align: left;
        margin-top: .875rem;
        color: #6E6E79;
    }

    div {
        box-sizing: border-box;
    }

    .icon-course_down,
    .icon-course_up {
        // transform: rotate(180deg);
        color: #999999;
        font-size: .625rem;
        font-weight: bold;
    }

    .change-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .625rem .75rem;
    }

    .change-item {
        position: relative;
        font-weight: 400;
        font-size: .8125rem;
        color: #00001C;
        line-height: 1;
        height: 2.25rem;
        width: 10.6563rem;
        background: #FFFFFF;
        border-radius: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .75rem;
    }

    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #FFFFFF;
        box-shadow: 0px -1px 10px 1px #F5F5F5;
        display: flex;
        padding: .625rem .75rem;
        align-items: center;
        justify-content: center;
    }

    .order {
        width: 100%;
        height: 2.5rem;
        border-radius: 1.2813rem 1.2813rem 1.2813rem 1.2813rem;
        border: .0313rem solid #F15353;
        font-weight: 500;
        font-size: .9375rem;
        color: #fff;
        background-color: #F15353;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .w375 {
        width: 375px;
        position: fixed;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}
</style>